<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<title>添加通用黑模板</title>
<style type="text/css">
	body{
		background-color: #F8F8F8;
	}
	.form-horizontal .controls span{
		margin-top:0;
	}
	textarea{
		resize:none;
		width:400px;
		height:300px;
	}
	.example{
		line-height: 30px;
	}
	.select2 span{
		display:block !important;
		margin-top: 0px !important;
	}
	.control-group .select2-container {
		width: 216px !important;
	}
	.select2-dropdown {
		width: 220px !important;
	}
	.hover-tip{
		position: relative;
		display: inline-block;
		width:15px;
		height:15px;

	}
	.hover-tip .tips{
		display: none;
		text-align: left;
		color:#FFF;
		position: absolute;
		width:200px;
		padding:10px;
		left:-96px;
		top:21px;
		border-radius:6px;
		background-color: #fe6633;
	}
	.hover-tip:hover .tips{
		display: block;
	}
</style>
</head>

<body menuId="283">
	<!--Action boxes-->
	<div class="container-fluid">
		<hr>
		<div class="row-fluid">
			<div class="span12">
				<form class="form-horizontal" id="form">
					<input type="hidden" name="templateId" id="templateId">
					<input type="hidden" id ="submitType" name="submitType">
                    <div class="control-group">
                        <label class="control-label" ><span class="red">*</span>模板级别：</label>
                        <div class="controls">
							<span style="line-height:30px">通用模板</span>
							<input type="hidden" name="templateLevel" id="templateLevel" value="0">
                        </div>
                    </div>

					<div class="control-group">
						<label class="control-label" for="sign">短信签名</label>
						<div class="controls">
							<input type="text" id="sign" name="sign" value="<c:out value="${data.sign}" escapeXml="true"/>" placeholder="限2-12个字，中文、英文和数字">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"><span class="red">*</span>模板属性</label>
						<div class="controls js-radio-group">
							<label class="radio inline">
								<input type="radio" name="smsType" value="10" class="js-radio js-yzm" > 行业
							</label>
							<label class="radio inline">
								<input type="radio" name="smsType" value="11" class="js-radio"> 营销
							</label>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">
							<span class="hover-tip">
								<img src="${ctx}/img/icon-tip.gif" alt="">
								<div class="tips">
									<p>固定模板请勿使用特殊符号，例如"[]","【】"</p>
									<p>变量模板中的变量请使用"{}"表示，模板中至少包含一个变量，请勿使用特殊符号，例如"[]","【】"</p>
								</div>
							</span>
							<span class="red">*</span>模板类型
						</label>
						<div class="controls">
							<select name="templateType" id="templateType" class="template">
								<option value="1">变量模板</option>
								<option value="0">固定模板</option>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">示例</label>
						<div class="controls">
							<span class="example"></span>
						</div>
					</div>
					<div class="control-group">
                        <div>
                            <label class="control-label"><span class="red">*</span>模板内容</label>
                            <div class="controls">
                                <textarea name="content"  placeholder="请输入模板内容&#10;模板内容、短信签名的总长度不可超过500个字" id="temp_content"></textarea>
                            </div>
                        </div>
                    </div>
					<div class="control-group">
						<div class="controls">
							<input type="hidden" id ="contenta" value="<c:out value="${data.content}" escapeXml="true"/>">
							<a href="javascript:;" class="btn btn-primary btn-small js-save">确定</a>
								<a href="javascript:;" class="btn btn-small js-back">取消</a>
						</div>

					</div>
				</form>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	//不同模板不同短信类型，示例不同
	//key的第一位代表短信类型，第二位代表模板类型，验证码短信没有固定模板
	var map = {
		"101" : " 验证码示例：您的验证码是{}，如非本人操作 ，请忽略此条短信。\r\n \r\n \r\n \r\n \r\n \r\n通知示例：尊敬的{}用户，您的账户已入账{}元，请及时查收，如有疑问请联系客服热线。",
		"100" : " 因受台风天鸽影响，8月24日全市人民放假一天，请市民注意人身安全。",
		"110" : " 欢迎您成为酒店集团会员，我们将竭诚为您服务。如非本人操作，请致电如家客服热线。",
		"111" : " 尊敬的{}用户，本店将于下周举行年中大促，退订回复TD。"
	};

	$(function(){
        var state = "${data.state}";
        var templateId = "${data.templateId}";
        var popStr = "";
        console.log("templateId: ", templateId);
        if(templateId){
            popStr = '是否确定提交此模板？'
        } else {
            popStr =  "是否确定提交此模板？"
        }
        //初始化数据
        initData();

		//选择短信类型
		$(".js-radio").click(function(){
			var value = $(this).val();
			var templateType = $(".template").val();
			draw(value, templateType);


		})
		//选择模板类型
		$(".template").change(function(){
			var template = $(this).val();
			var smstype = getSmsType();
            var state = "${data.state}";

			draw(smstype, template);
		})
	    //提交
		$(".js-save").click(function(){
            $("#temp_content").val($("#temp_content").val().replace(/[\r\n]/g,""));//去掉回车换行
          //  $("#temp_content").val($("#temp_content").val().replace(/[ ]/g,""));    //去掉空格
            var sign = $.trim($("#sign").val());
            var sign_length = sign.length*1;
            var content =  $.trim($("#temp_content").val());
            var content_length = content.length*1;
            var templateType = $(".template").val();
            var auditContent =  $.trim($("#noPass").val());
            var auditContent_length = auditContent.length*1;

            var isChineseSms = true;



				if(sign_length!=0){
                    if((sign_length > 12 || sign_length < 2) ){
                        parent.layer.msg("签名长度必须在2-12之间", {icon:2});
                        return false;
                    }
                    if(!/^([a-z0-9\u4E00-\u9FA5])+$/i.test(sign)){
                        parent.layer.msg("签名格式为中文或者英文字母或者数字", {icon:2});
                        return false;
                    }
				}

                if((sign_length + content_length) > 500 ){
                    parent.layer.msg("模板内容+签名长度超过500", {icon:2});
                    return false;
                }

                if(/([\u4E00-\u9FA5]|[\（\）\《\》\——\；\，\。\“\”\！\【\】])/.test(content)){
                    //中文短信
                    if(content.indexOf('【') != -1 || content.indexOf('】') != -1 || content.indexOf('【】') != -1){
                        parent.layer.msg("中文短信模板内容不能包含【,】和【】", {icon:2});
                        return false;
                    }
                } else {
                    if(content.indexOf('[') != -1 || content.indexOf(']') != -1 || content.indexOf('【') != -1 || content.indexOf('】') != -1){
                        parent.layer.msg("英文短信模板内容不能包含[,]和[]", {icon:2});
                        return false;
                    }
                }

                var placeHolderReg0 = RegExp("\\{.*?\\}","g");
                //0是固定模板 1是变量模板
                if(templateType == 0 && placeHolderReg0.test(content)){
                    parent.layer.msg("固定模板中不能包含'{}'", {icon:2});
                    return false;
                }


            var index = layer.confirm(popStr, {
                btn: ['确定','返回修改'] //按钮
            }, function(){
                var params = $("#form").serialize();
                //通用状态模板的修改默认传通过状态
                var templateId  = $("#templateId").val();
                if(templateId != '' && templateId != null){
                    params = params +"&state="+state;
                }
                postAutoTemplateForm(params);
            },function () {
				layer.close(index)
            });


            <%--var options = {--%>
                <%--url: "${ctx}/smsaudit/autoTemplate/save",--%>
                <%--success: function () {--%>
                    <%--alert("ajax请求成功");--%>
                <%--}--%>
            <%--};--%>
            <%--$("#form").ajaxForm(options);--%>
		})
		//取消
		$(".js-back").click(function(){
            closePage()
		})
		/*
		 * @params s  smstype
		 * @params t templateType
		  * */
		function draw(s, t){
			var key = s + t;
			$(".example").text(map[key]);
		}
		function getSmsType(){
		    var radio = $(".js-radio-group").find(".js-radio");
		    var smstype;
		    for(var i = 0; i < radio.length; i++){
				if(radio[i].checked){
                    smstype = radio[i].value;
                    break;
				}
			}

			return smstype;
		}





        function closePage() {
            var index = parent.layer.getFrameIndex(window.name); //获取当前窗体索引
            parent.layer.close(index); //执行关闭
        }

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var url = decodeURI(window.location.search);
            var r = url.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return "";
        }

        function postAutoTemplateForm(params) {
            $.ajax( {
                type : "POST",
                url : "${ctx}/balckTemplate/template/save",
                data : params,
                success : function(res) {
                    if(res.code == 666 ){
                        parent.layer.confirm(res.msg, {
                            btn: ['确定','取消']
                        },function () {
                            var params = $("#form").serialize();
                            params = params +"&isSureDel=true";
                            postAutoTemplateForm(params);
                        });

                    }else{
                        if(res.code == 500){
                            parent.layer.msg(res.msg, {icon:2,time: 1500})
                            layer.close(index);
                            return;

                        }
                        if(res.code != 0){
                            parent.layer.msg(res.msg, {icon:2})
                            return;
                        }

                        parent.layer.msg(res.msg, {icon: 1,time: 1500});
                        parent.window.location.reload();
                        closePage();

                    }
                }
            });
        }

        function initData(){
            // 模板属性 10:行业，11：营销
            var smsType = "${data.smsType}";
            //// 模板类型，0：固定模板，1：变量模板
            var templateType = "${data.templateType}";
            if(templateType =='' || templateType == null){
                $("input[name='smsType'][value= '10']").attr('checked',true);
                $("input[name='smsType'][value= '10']").closest("span").addClass("checked");
                draw("10", "1");
            }else{
                $("input[name='smsType'][value= \"${data.smsType}\" ]").attr('checked',true);
                $("input[name='smsType'][value= \"${data.smsType}\"] ").closest("span").addClass("checked");
                draw(smsType, templateType);
                $('#templateType').val(templateType);
            }
            //模板内容
            var content = $('#contenta').val();
            $('#temp_content').val(content);
            //模板ID
            var templateId = "${data.templateId}";
            $('#templateId').val(templateId);
            //提交来源
            var submitType = "${data.submitType}";
            $('#submitType').val(submitType);
        }


    });

    //@ sourceURL=autoTemplaterAdd.js
	</script>
</body>
</html>